<template name="goodsTable">
    <el-table :data="goodsList" :height="getWinHeight" border style="width: 100%;font-size:12px" :row-style="{cursor:'pointer',fontSize:'12px'}" highlight-current-row @selection-change="tableSelectChange">
      <el-table-column
        type="selection"
        align="center"
        width="40">
      </el-table-column>
      <el-table-column
        label="商品图片"
        align="center"
        width="100">
        <template slot-scope="scope">
          <img :src="scope.row.head_img" width="80" height="80"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="product_name"
        label="商品名称"
        align="center"
        width="160"
      >
      </el-table-column>
      <el-table-column
        label="分类名称"
        align="center">
        <template slot-scope="scope">
          <span>{{ (scope.row.one_class_name ? scope.row.one_class_name.class_name : '分类不存在') + '/' + (scope.row.two_class_name ? scope.row.two_class_name.class_name : '')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        align="center"
        label="价格"
		width="80">
      </el-table-column>
      <el-table-column
        prop="buy_num"
        label="销量"
        align="center"
		width="70">
      </el-table-column>
      <el-table-column
        prop="tj"
        label="推荐"
		width="50"
        align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.tj==='0'">否</span>
          <span v-if="scope.row.tj==='1'">是</span>
        </template>
      </el-table-column>
      <el-table-column label="权值" align="center" width="60" v-if="$store.state.system_type==1">
        <template slot-scope="scope">
          <popover :form-val="scope.row" @reloadFun="resetQz"></popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
		width="80"
        align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status==='0'" style="color:#aaa">待审核</span>
          <span v-if="scope.row.status==='1'" style="color:red">已上架</span>
          <span v-if="scope.row.status==='2'" style="color:lightseagreen">未上架</span>
          <span v-if="scope.row.status==='3'" style="color:red">审核不通过</span>
          <span v-if="scope.row.status==='4'" style="color:#ddd">商品删除</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        >
        <template slot-scope="scope">
          <el-button
                  type="text"
            size="mini"
            @click="handleSee(scope.$index, scope.row)">查看</el-button>
          <el-button
                  type="text"
            size="mini"
            @click="handleCheck(scope.$index, scope.row)" v-if="scope.row.status==='0' && $store.state.system_type==1">审核</el-button>
          <el-button
                  type="text"
            size="mini"
            @click="handleDown(scope.row)" v-if="scope.row.status==='1' && $store.state.system_type==0">下架</el-button>
          <el-button
                  type="text"
            size="mini"
            @click="handleUp(scope.row)" v-if="scope.row.status==='2' && $store.state.system_type==0">上架</el-button>
          <el-button
                  type="text"
            size="mini"
            @click="recommendClick(scope.row)" v-if="$store.state.system_type==1 && scope.row.tj==0"
          >
            推荐
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="recommendClick(scope.row)" v-if="$store.state.system_type==1 && scope.row.tj==1"
          >
            推荐取消
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="handleReset(scope.row)" v-if="scope.row.status==='4' && $store.state.system_type==0">恢复</el-button>
          <el-button
                  type="text"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)" v-if="$store.state.system_type==0 && scope.row.status != 4">修改</el-button>
          <el-button
                  type="text"
            size="mini"
            @click="handleDelete(scope.$index, scope.row)" v-if="$store.state.system_type==0 && scope.row.status != 4 && scope.row.status != 0">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
</template>

<script>
import popover from './popoverQz'
export default {
    name: 'goodsTable',
    components: {
        popover
    },
    props: ['goodsList'],
    data() {
      return {

      }
    },
    computed:{
        getWinHeight(){
            let winHeight = document.body.clientHeight;
            return winHeight - 320
        }
    },
    methods:{
        handleSee(index,row){
          this.$router.push({
            path: '/newGoods',
            query: {
              type: 4,
              list: row
            }
          })
        },
        handleEdit(index, row) {
          this.$router.push({
            path: '/newGoods',
            query: {
              type: 2,
              list: row
            }
          })
        },
        recommendClick(row){
            this.recommend(row)
        },
        resetQz(){
            this.$emit('refreshTableFun')
        },
        async recommend(row){
            let tj = row.tj;
            console.log(tj);
            let msg = row.tj==0?'此操作将设置此商品为推荐, 是否继续':'此操作将取消此商品为推荐, 是否继续';
            let type = row.tj==0?'success':'warning';
            tj = tj==0?'1':0;
            this.$confirm(msg,'提示',{
                confirmButtonText:'确认',
                cancelButtonText:'取消',
                type:type
            }).then(()=>{
                this.operationTj(row,tj)
            }).catch(()=>{

            })
        },
        async operationTj(row,tj){
            console.log(tj);
            console.log(row.id);
            let res = await this.$Http.recommendGoods({
                id: row.id,
                tj:tj})
            console.log(res)
            if(res.code == 1){
                this.$message({
                    type: 'success',
                    message:'操作成功!'
                });
                this.$emit('refreshTableFun')
            }
        },
        handleCheck(index,row){
          this.$router.push( {
              path:'/newGoods',
              query:{
                  type:5,
                  list:row
              }
            })
        },
        handleDelete(index, row) {
          console.log(index, row);
          let status = 4;
          this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.operationStatus(row,status)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        async operationGoods(list){
          let res = await this.$Http.operationGoods({
              type: 3,
              id: list.id
          })
          console.log(res)
          if(res.code == 1){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.$emit('refreshTableFun')
          }else{
            this.$message({
              type: 'warning',
              message: '删除失败! 请重新尝试'
            });
          }
        },
        tableSelectChange(val) {
          console.log(val)
          this.$emit('tableSelectChange',val)
        },
        handleUp(row){
            let status = 1;
            this.$confirm('是否确认上架该商品？','提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
            }).then(()=>{
                this.operationStatus(row,status)
            }).catch(()=>{
                this.$message.info('操作已取消！')
            })
        },
        handleDown(row){
            let status = 2;
            this.$confirm('是否确认下架该商品？','提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.operationStatus(row,status)
            }).catch(()=>{
                this.$message.info('操作已取消！')
            })
        },
        handleReset(row){
            let status = 2;
            this.$confirm('是否确认恢复该商品？','提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.operationStatus(row,status)
            }).catch(()=>{
                this.$message.info('操作已取消！')
            })
        },
        //修改商品状态
        async operationStatus(row,status){
            let res = await this.$Http.operationGoodsStatus({
                id:row.id,
                status:status
            })
            console.log(res);
            if(res.code == 200){
                this.$message.success('操作成功！')
                this.$emit('refreshTableFun')
            }
        }

      },

}
</script>

<style>
</style>
